<template>
  <div class="add-main-box">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <editor v-model="form.content" :min-height="180"/>
      </el-form-item>
      <el-form-item label="类别" prop="categoryId">
        <el-cascader
          v-model="form.categoryId"
          :options="leaningCategoryList"
          :props="props"
          @change="changeCategory">
        </el-cascader>
      </el-form-item>
      <el-form-item label="附件" prop="attachment" >
        <file-upload v-model="form.attachment" :fileType="fileType" />
      </el-form-item>
      <el-form-item label="受众范围" prop="receiveList">
        <div style="width: 60%">
          <org-users :useTreeAll="true" :pickArray="form.receiveList" @outValue="getReceiveData" :hide-tabs="hideTabs"></org-users>
        </div>
      </el-form-item>
      <div class="approve-histroy-list" v-if="form.reviewList && form.reviewList.length">
        <div class="sub-title">
          <div class="sub-before-line"></div>
          <span style="margin-left: 10px">审核记录</span>
        </div>
        <div class="table-box">
          <el-table :data="form.reviewList" style="width: 85%;margin-left: 100px">
            <el-table-column label="操作人" align="center" prop="reviewerName"></el-table-column>
            <el-table-column label="操作结果" align="center" prop="result">
              <template slot-scope="scope">
                {{scope.row.result == 1 ?  '通过' : scope.row.result == 2 ? '驳回' : '提交'}}
              </template>
            </el-table-column>
            <el-table-column label="审核意见" align="center" prop="reason" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作时间" align="center" prop="reviewTime"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm" :disabled="form.status == 0">确 定</el-button>
      <el-button @click="cancel" class="cancel-btn">取 消</el-button>
    </div>
  </div>

</template>

<script>
    import {common} from "./common";
    import OrgUsers from "../../../components/OrgUsers/index";
    import { getLeaningContent, addLeaningContent, updateLeaningContent } from "@/api/examine/leaningContent";
    export default {
        name: "add",
        mixins:[common],
        components: {
          OrgUsers
        },
        data(){
          return {
            // 表单参数
            form: {
              status: null,
              title: '',
              content: '',
              categoryId: null,
              attachment:'',
              receiveList:[]
            },
            // 表单校验
            rules: {
              title: [
                { required: true, message: "标题不能为空", trigger: "blur" }
              ],
              content: [
                { required: true, message: "内容不能为空", trigger: "blur" }
              ],
              categoryId: [
                { required: true, message: "类别不能为空", trigger: "change" }
              ],
              receiveList:[
                { required: true, message: "受众范围不能为空", trigger: "change" }
              ]
            },
            hideTabs: ['tag'],
            fileType: ["rar", "zip", "png", "jpg", "gif","doc","docx","xls","xlsx","pdf","mp4","avi","wmv"]
          }
        },
        methods:{
          // 取消按钮
          cancel() {
            this.reset();
            this.$router.push({path: "/leaning/list"});
          },
          // 表单重置
          reset() {
            this.form = {
              id: null,
              title: null,
              content: null,
              categoryId: null,
              attachment: null,
              receiveList:[]
            };
            this.resetForm("form");
          },
          /** 提交按钮 */
          submitForm() {
            this.$refs["form"].validate(valid => {
              if (valid) {
                if (this.form.id) {
                  updateLeaningContent(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.$router.push({path: "/leaning/list"});
                  });
                } else {
                  delete this.form.id
                  addLeaningContent(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.$router.push({path: "/leaning/list"});
                  });
                }
              }
            });
          },
          /*获取详情*/
          getDetail(id){
            getLeaningContent(id).then(response => {
              if(response.code == 200){
                let data = response.data
                this.form = {
                  status: data.status,
                  id:data.id,
                  title: data.title,
                  content: data.content,
                  categoryId: data.categoryId,
                  receiveList: data.receiveListJson ? JSON.parse(data.receiveListJson) : [],
                  attachment: data.attachment,
                  reviewList:data.reviewList
                }
              }
            });
          },
          // 选择受众人员
          getReceiveData(data){
            this.form.receiveList = data
          },
        },
        created() {
          if(this.$route.query.id){
            this.reset()
            this.getDetail(this.$route.query.id)
          }
        }
    }
</script>

<style scoped lang="scss">
.add-main-box{
  padding: 30px 0;
  width: 80%;
  margin-left: 9%;
  ::v-deep .editor{
    min-height: 240px !important;
  }
  .footer{
    text-align: center;
    margin-top: 40px;
    .cancel-btn{
      margin-left: 40px;
    }
  }
  ::v-deep .hide-upload-input .upload-file-uploader{
    /*display: none !important;*/
  }
  ::v-deep .el-link--inner{
    color: rgb(64, 158, 255);;
  }
  ::v-deep .el-upload-list__item{
    padding: 0 10px;
  }
  ::v-deep .el-cascader{
    width: 300px !important;
  }
  .sub-title {
    display: flex;
    flex-flow: row nowrap;
    padding-bottom: 20px;

    .sub-before-line {
      border: 1px;
      background-color: #4e8dff;
      width: 6px;
      height: 20px;
    }
  }
}
</style>
